<template>
  <div class="assetsdetailed">
    <section class="detailed">
      <ul class="detailedheader">
        <li class="list">
          <h2>{{$t('fborder.main[0]')}}</h2>
        </li>
        <li class="list">
          <!-- <h2>币种选择</h2> -->
        </li>
      </ul>
      <section class="detailedmian">
        <!-- <fabi-order  @func="order" ></fabi-order> -->
        <section class="Order">
          <el-tabs type="border-card" v-model="type" @tab-click="typehide">
            <el-tab-pane :label="$t('fborder.main[1]')" name="1">
              <el-table :data="requestData1.data" style="width: 100%">
                <el-table-column prop="order_no" :label="$t('fborder.list[0]')" width="300" align="center"></el-table-column>
                <el-table-column prop="total_num" :label="$t('fborder.list[1]')">
                   <template slot-scope="scope">
                    {{scope.row.total_num}} {{scope.row.code}}
                  </template>
                </el-table-column>
                <el-table-column prop="price" :label="$t('fborder.list[2]')"></el-table-column>
                <el-table-column prop="total_price" :label="$t('fborder.list[3]')"></el-table-column>
                <el-table-column prop="status" :label="$t('fborder.list[4]')">
                  <template slot-scope="scope">
                    <!-- 1待付款 2已付款 3已确认完成 4 申述中 5取消 6冻结 -->
                    <span v-if="scope.row.status == 1">{{$t('fborder.list[5]')}}</span>
                    <span v-else-if="scope.row.status == 2">{{$t('fborder.list[6]')}}</span>
                    <span v-else-if="scope.row.status == 3">{{$t('fborder.list[7]')}}</span>
                    <span v-else-if="scope.row.status == 4">{{$t('fborder.list[8]')}}</span>
                    <span v-else-if="scope.row.status == 5">{{$t('fborder.list[9]')}}</span>
                    <span v-else-if="scope.row.status == 6">{{$t('fborder.list[10]')}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="created_at" :label="$t('fborder.list[11]')" width="200"></el-table-column>
                <el-table-column prop="address" :label="$t('fborder.list[12]')">
                  <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handlecancellations(scope.row)">{{$t('fborder.list[13]')}}</el-button>
                  </template>
                </el-table-column>
              </el-table>
               <PagesSize  :content="requestData1" @func="getMsgFormSon"></PagesSize>
            </el-tab-pane>
            <el-tab-pane :label="$t('fborder.main[2]')" name="2">
              <el-table :data="requestData2.data" style="width: 100%">
                <el-table-column prop="order_no" :label="$t('fborder.list[0]')" width="300" align="center"></el-table-column>
                <el-table-column prop="total_num" :label="$t('fborder.list[1]')">
                  <template slot-scope="scope">
                    {{scope.row.total_num}} {{scope.row.code}}
                  </template>
                </el-table-column>
                <el-table-column prop="price" :label="$t('fborder.list[2]')"></el-table-column>
                <el-table-column prop="total_price" :label="$t('fborder.list[3]')"></el-table-column>
                <el-table-column prop="status" :label="$t('fborder.list[4]')">
                  <template slot-scope="scope">
                    <!-- 1待付款 2已付款 3已确认完成 4 申述中 5取消 6冻结 -->
                    <span v-if="scope.row.status == 1">{{$t('fborder.list[5]')}}</span>
                    <span v-else-if="scope.row.status == 2">{{$t('fborder.list[6]')}}</span>
                    <span v-else-if="scope.row.status == 3">{{$t('fborder.list[7]')}}</span>
                    <span v-else-if="scope.row.status == 4">{{$t('fborder.list[8]')}}</span>
                    <span v-else-if="scope.row.status == 5">{{$t('fborder.list[9]')}}</span>
                    <span v-else-if="scope.row.status == 6">{{$t('fborder.list[10]')}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="created_at" :label="$t('fborder.list[11]')" width="200"></el-table-column>
                <el-table-column prop="address" :label="$t('fborder.list[12]')">
                  <template slot-scope="scope">
                    <el-button type="primary" size="small" @click="handlecancellations(scope.row)">{{$t('fborder.list[13]')}}</el-button>
                  </template>
                </el-table-column>
              </el-table>
               <PagesSize  :content="requestData2" @func="getMsgFormSon"></PagesSize>
            </el-tab-pane>
          </el-tabs>
        </section>
      </section>
    </section>
  </div>
</template>

<script>
  import { assetInfo } from '@/api/user';
  import { orderlists} from "@/api/fbTrade";
  import { getToken } from "@/libs/util";
  import PagesSize from "_dom/paging";
  export default {
    name: 'fabiorder',
    data() {
      return {
        type: '1',
        timer: null,
        requestData1: [],
        requestData2: [],
        changedata:{
            page: "1",
            wid: "1"
        },
      }
    },
    methods: {
      getData1(hideloading){
        let _data1 = {
            order_type: "1",
        }
        orderlists(_data1,hideloading).then(res => {  
             
                this.requestData1 = res;  
             
        }).catch(err => {});
      },
      getData2(hideloading){
        let _data2 = {
            order_type: "2",
        };
        orderlists(_data2,hideloading).then(res => {  
             
                this.requestData1 = res;  
                this.requestData2 = res;  
             
        }).catch(err => {});
      },
      getMsgFormSon(datavue){ //分页
          this.changedata.page = datavue.page;
          this.typget();
      },
      typehide(row){ //切换
          this.type = row.name;
          this.changedata = {
              page: "1",
              wid:"1"
          };
          this.typget();
      },
      typget(){
        switch (this.type) {
            case '1':
                this.getData1();
                if (this.timer) {
                    clearInterval(this.timer);
                }
                this.timer = setInterval(()=> {
                    this.getData1(true);
                }, 3000)
                break;
            case '2':
                this.getData2();
                if (this.timer) {
                    clearInterval(this.timer);
                }
                this.timer = setInterval(()=> {
                    this.getData2(true);
                }, 3000)
                break;
            default:
                break;
        }
      },
      handlecancellations(item){
        this.$router.push('/fabiorderdetail?order_no='+item.order_no)
      }
    },
    beforeDestroy(){
        clearInterval(this.timer);
        this.timer = null;
    },
    created() {
      this.getData1();
      if(getToken('token')){
          this.timer = setInterval(()=> {
              this.getData1(true);
          }, 3000)
      };
    },
    components: {
        PagesSize
    }
  }
</script>
<style lang="less">
  .assetsdetailed{
    min-height: 70vh;
  }
  .pagination{
    background: #0a1017 !important;
    margin: 0;
    padding: 20px 0;
  }
</style>
